import React, { useRef, useState } from 'react'


export default function App() {
    interface TodoTask {
        name: string,
        isChecked: boolean,
        id: number
    }

    const lineStyle = {
        textDecoration: "line-through"
    }
    
    const [list, setList] = useState<TodoTask[]>([{
        name: "test",
        isChecked: false,
        id: 1
    }])
    const txtRef = useRef<HTMLInputElement>(null)
    const handlerChecked = (index: number) => {
        var newList = [...list];
        newList[index].isChecked = !newList[index].isChecked
        setList(newList)
    }
    return (
        <div>
            <div>
                <input ref={txtRef} /><button onClick={
                    () => {
                        let newList = [...list];
                        let task: TodoTask = {
                            id: Math.random(),
                            name: (txtRef.current as HTMLInputElement).value,
                            isChecked: false,
                        }
                        newList.push(task);
                        setList(newList);
                        (txtRef.current as HTMLInputElement).value = "";
                    }
                }>添加</button>
            </div>
            <ul>
                {
                    list.map((item, index) =>
                        <li key={item.id}>
                            <input type='checkbox' checked={item.isChecked} onChange={() => {
                                handlerChecked(index)
                            }} />
                            {!item.isChecked ? <span>{item.name}</span> : <span style={lineStyle}>{item.name}</span>}
                        </li>
                    )
                }
            </ul>
        </div>
    )
}
